<template>
  <div>
    <el-row type="flex" :gutter="10">
      <el-col :span="codeSpan" class="script-content">
        <ms-code-edit v-if="isCodeEditAlive" :mode="codeEditModeMap[jsr223ProcessorData.scriptLanguage]"
                      :read-only="isReadOnly"
                      :data.sync="jsr223ProcessorData.script" theme="eclipse" :modes="['java','python']"
                      ref="codeEdit"/>
      </el-col>
      <div style="width: 14px;margin-right: 5px;">
        <div style="height: 12px;width: 12px; line-height:12px;">
          <i :class="showMenu ? 'el-icon-remove-outline' : 'el-icon-circle-plus-outline'"
             class="show-menu"
             @click="switchMenu"></i>
        </div>
      </div>
      <el-col :span="menuSpan" class="script-index" v-if="isReadOnly !== true">
        <ms-dropdown :default-command="jsr223ProcessorData.scriptLanguage" :commands="languages"
                     style="margin-bottom: 5px;margin-left: 15px;"
                     @command="languageChange"/>
        <script-nav-menu ref="scriptNavMenu" :language="jsr223ProcessorData.scriptLanguage" :menus="codeTemplates"
                         @handleCode="handleCodeTemplate"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import MsCodeEdit from "../../../definition/components/MsCodeEdit";
import MsDropdown from "../../../../common/components/MsDropdown";
import CustomFunctionRelate from "@/business/components/project/menu/function/CustomFunctionRelate";
import ApiFuncRelevance from "@/business/components/project/menu/function/ApiFuncRelevance";
import ScriptNavMenu from "@/business/components/project/menu/function/ScriptNavMenu";

export default {
  name: "Jsr233ProcessorContent",
  components: {MsDropdown, MsCodeEdit, CustomFunctionRelate, ApiFuncRelevance, ScriptNavMenu},
  data() {
    return {
      jsr223ProcessorData: {},
      codeTemplates: [
        {
          title: this.$t('project.code_segment.api_test'),
          children: [
            {
              title: this.$t('project.code_segment.import_api_test'),
              command: "api_definition",
            },
            {
              title: this.$t('project.code_segment.new_api_test'),
              command: "new_api_request",
            }
          ]
        },
        {
          title: this.$t('project.code_segment.custom_value'),
          children: [
            {
              title: this.$t('api_test.request.processor.code_template_get_variable'),
              value: 'vars.get("variable_name")',
            },
            {
              title: this.$t('api_test.request.processor.code_template_set_variable'),
              value: 'vars.put("variable_name", "variable_value")',
            },
            {
              title: this.$t('api_test.request.processor.code_template_get_response_header'),
              value: 'prev.getResponseHeaders()',
              disabled: this.isPreProcessor
            },
            {
              title: this.$t('api_test.request.processor.code_template_get_response_code'),
              value: 'prev.getResponseCode()',
              disabled: this.isPreProcessor
            },
            {
              title: this.$t('api_test.request.processor.code_template_get_response_result'),
              value: 'prev.getResponseDataAsString()',
              disabled: this.isPreProcessor
            },
          ]
        },
        {
          title: this.$t('project.code_segment.project_env'),
          children: [
            {
              title: this.$t('api_test.request.processor.param_environment_set_global_variable'),
              value: 'vars.put(${__metersphere_env_id}+"key","value");\n' + 'vars.put("key","value")',
            },
          ]
        },
        {
          title: this.$t('project.code_segment.code_segment'),
          children: [
            {
              title: this.$t('project.code_segment.insert_segment'),
              command: "custom_function",
            }
          ]
        },
        {
          title: this.$t('project.code_segment.exception_handle'),
          children: [
            {
              title: this.$t('project.code_segment.stop_test'),
              value: 'ctx.getEngine().stopThreadNow(ctx.getThread().getThreadName());'
            },
          ]
        },
        {
          title: this.$t('project.code_segment.report_handle'),
          hideScript: this.isHideScript(),
          children: [
            {
              title: this.$t('api_test.request.processor.code_add_report_length'),
              value: 'String report = ctx.getCurrentSampler().getRequestData();\n' +
                'if(report!=null){\n' +
                '    //补足8位长度，前置补0\n' +
                '    String reportlengthStr = String.format("%08d",report.length());\n' +
                '    report = reportlengthStr+report;\n' +
                '    ctx.getCurrentSampler().setRequestData(report);\n' +
                '}',
            },
            {
              title: this.$t('api_test.request.processor.code_hide_report_length'),
              value: '//Get response data\n' +
                'String returnData = prev.getResponseDataAsString();\n' +
                'if(returnData!=null&&returnData.length()>8){\n' +
                '//remove 8 report length \n' +
                '    String subStringData = returnData.substring(8,returnData.length());\n' +
                '    if(subStringData.startsWith("<")){\n' +
                '        returnData = subStringData;\n' +
                '        prev.setResponseData(returnData);\n' +
                '    }\n' +
                '}',
              disabled: this.isPreProcessor,
            },
          ]
        }
      ],
      isCodeEditAlive: true,
      languages: [
        'beanshell', "python", "groovy", "nashornScript", "rhinoScript"
      ],
      codeEditModeMap: {
        beanshell: 'java',
        python: 'python',
        groovy: 'java',
        nashornScript: 'javascript',
        rhinoScript: 'javascript',
      },
      codeSpan: 20,
      menuSpan: 4,
      showMenu: true,
    }
  },
  created() {
    this.jsr223ProcessorData = this.jsr223Processor;
  },
  props: {
    isReadOnly: {
      type: Boolean,
      default:
        false
    },
    jsr223Processor: {
      type: Object,
    },
    protocol: String,
    isPreProcessor: {
      type: Boolean,
      default:
        false
    },
    node: {},
  },
  watch: {
    jsr223Processor() {
      this.reload();
    }
  },
  methods: {
    addTemplate(template) {
      if (!this.jsr223ProcessorData.script) {
        this.jsr223ProcessorData.script = "";
      }
      this.jsr223ProcessorData.script += template.value;
      if (this.jsr223ProcessorData.scriptLanguage === 'beanshell') {
        this.jsr223ProcessorData.script += ';';
      }
      this.reload();
    },
    isHideScript() {
      return this.protocol !== 'TCP';
    },
    reload() {
      this.isCodeEditAlive = false;
      this.$nextTick(() => (this.isCodeEditAlive = true));
    },
    languageChange(language) {
      this.jsr223ProcessorData.scriptLanguage = language;
      this.$emit("languageChange");
    },
    addCustomFuncScript(script) {
      this.jsr223ProcessorData.script = this.jsr223ProcessorData.script ?
        this.jsr223ProcessorData.script + '\n\n' + script : script;
      this.reload();
    },
    switchMenu() {
      this.showMenu = !this.showMenu;
      if (this.showMenu) {
        this.codeSpan = 20;
        this.menuSpan = 4;
      } else {
        this.codeSpan = 24;
        this.menuSpan = 0;
      }
    },
    handleCodeTemplate(code) {
      if (!this.jsr223ProcessorData.script) {
        this.jsr223ProcessorData.script = code;
      } else {
        this.jsr223ProcessorData.script = this.jsr223ProcessorData.script + '\n' + code;
      }
      this.reload();
    },
  }
}
</script>

<style scoped>
.ace_editor {
  border-radius: 5px;
}

.script-content {
  height: calc(100vh - 570px);
  min-height: 440px;
}

.script-index {
  padding: 0 20px;
  width: 230px;
}

.template-title {
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 15px;
}

.document-url {
  margin-top: 10px;
}

.instructions-icon {
  margin-left: 5px;
}

.ms-dropdown {
  margin-bottom: 20px;
}

.show-menu {
  text-align: center;
  font-weight: bold;
  color: #935aa1;
  font-size: 18px;
  cursor: pointer;
}

.show-menu:hover {
  color: #935aa1;
}

</style>
